<template>
  <div ref="editorPane" class="editor-pane" @click="handleClickCanvas" @keyup.esc="handleKeyup">
    <div class="editor-pane-inner">
      <div class="editor-main" :style="{transform: 'scale('+scale+')', width: projectData.width + 'px', height: projectData.height + 'px'}">
        <div id="canvas-panel" ref="canvas-panel" class="page-preview-wrapper" :style="getCommonStyle(activePage.commonStyle)">
          <!--页面组件列表展示-->
          <edit-shape
            v-for="item in activePage.elements"
            :key="item.uuid"
            :uuid="item.uuid"
            :default-style="item.commonStyle"
            :style="getCommonStyle({width: item.commonStyle.width, height: item.commonStyle.height, left: item.commonStyle.left,top: item.commonStyle.top,position: item.commonStyle.position})"
            :active="item.uuid === activeElementUUID"
            @handleElementClick="handleElementClick(item.uuid)"
            @resize="handleElementResize"
          >
            <component :is="item.elName" :style="getCommonStyle({...item.commonStyle, top: 0, left: 0})" class="element-on-edit-pane" v-bind="item.propsValue" />
          </edit-shape>
        </div>
        <div class="page-wrapper-mask" />
      </div>

      <div
        class="page-wrapper-menu-operation"
        :style="getMenuOptionsPositionStyle"
        :class="{active: activeElementUUID}"
      >
        <v-tooltip
          v-for="(item, index) in menuOptions"
          :key="index"
          right
        >
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              v-bind="attrs"
              @click="handleElementCommand(item.value)"
              v-on="on"
            >
              <v-icon>mdi-{{ item.icon }}</v-icon>
            </v-btn>
          </template>
          <span v-text="item.title" />
        </v-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { register_components_object } from '../component-libs/plugins/index'
import EditShape from '../edit-shape'
import editorProjectConfig from '../../DataModel'
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas'

export default {
  components: {
    // 批量注册qk组件
    ...register_components_object,
    // 画板组件
    [EditShape.name]: EditShape
  },
  props: {
    // canvas画板缩放
    scale: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      getCommonStyle: editorProjectConfig.getCommonStyle,
      menuOptions: [{
        title: '复制',
        icon: 'content-copy',
        value: 'copy'
      }, {
        title: '删除',
        icon: 'delete',
        value: 'delete'
      }, {
        title: '字体放大',
        icon: 'format-annotation-plus',
        value: 'fontA+'
      }, {
        title: '字体缩小',
        icon: 'format-annotation-minus',
        value: 'fontA-'
      }, {
        title: '字体加粗',
        icon: 'format-bold',
        value: 'fontB'
      }, {
        title: '图层上移',
        icon: 'arrow-expand-up',
        value: 'layerUp'
      }, {
        title: '图层下移',
        icon: 'arrow-expand-down',
        value: 'layerDown'
      }, {
        title: '图层置顶',
        icon: 'arrow-collapse-up',
        value: 'layerTop'
      }, {
        title: '图层置底',
        icon: 'arrow-collapse-down',
        value: 'layerBottom'
      }],
      editorPaneWidth: 0
    }
  },
  computed: {
    ...mapGetters([
      'projectData',
      'activePageUUID',
      'activeElementUUID',
      'currentPageIndex',
      'activeElementIndex',
      'activeElement',
      'activePage'
    ]),
    getMenuOptionsPositionStyle() {
      const both = (this.editorPaneWidth - this.projectData.width * this.scale) / 2 - this.projectData.width
      const right = both < 100 ? 100 : both
      return {
        right: right + 'px'
      }
    }
  },
  mounted() {
    this.editorPaneWidth = this.$refs.editorPane.offsetWidth
  },
  methods: {
    /**
			 * 元素被点击
			 * @param uuid
			 */
    handleElementClick(uuid) {
      this.$store.dispatch('h5editor/setActiveElementUUID', uuid)
    },
    /**
			 * 移动改变元素大小定位
			 * @param pos 当pos有值表示移动中需要实时同步样式变化，pos为undefind时则表示移动结束，记一次历史纪录
			 * 鼠标移动完成时才记入历史纪录
			 */
    handleElementResize(pos) {
      if (!pos) {
        this.$store.dispatch('h5editor/addHistoryCache')
        return
      }
      this.projectData.pages[this.currentPageIndex].elements[this.activeElementIndex].commonStyle.left = pos.left
      // 更新元素commonStyle
      this.projectData.pages[this.currentPageIndex].elements[this.activeElementIndex].commonStyle = {
        ...pos
      }
    },
    handleClickCanvas(e) {
      if (!e.target.classList.contains('element-on-edit-pane') && !e.target.classList.contains('menu-item-on-edit-panel')) {
        this.$store.dispatch('h5editor/setActiveElementUUID', '')
      }
    },
    /**
			 * 对元素进行操作命令
			 */
    handleElementCommand(command) {
      this.$store.dispatch('h5editor/elementCommand', command)
    },
    /**
			 * 监听键盘事件
			 * @param e
			 */
    handleKeyup(e) {
      console.log(1111, e)
    },
    /**
			 * 提供截屏作为项目主图
			 */
    screenshots() {
      const el = document.querySelector('#canvas-panel')
      html2canvas(el, {
        width: 375,
        height: 667,
        proxy: '/htmltocanvas/corsproxy' // 设置跨域接口
      }).then(canvas => {
        const url = canvas.toDataURL('image/jpeg')
        this.$store.commit('updateCoverImage', url)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .editor-pane {
    height: calc(100% - 60px);
    width: 100%;
    border: 1px solid #f5f5f5;
    border-width: 0 1px;
    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
    background-position: 0 0, 13px 13px;
    background-size: 26px 26px;
    display: flex;
    justify-content: center;
  }

  .editor-pane-inner {
    height: 100%;
    width: 100%;
    padding: 20px;
    position: relative;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 3px;
      height: 0;
    }
    &::-webkit-scrollbar-track {
      background: #fff;
    }
    &::-webkit-scrollbar-thumb {
      background: #d8d8d8;
    }
    &::-webkit-scrollbar-corner {
      background: #d8d8d8;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #999; // 高亮的颜色
    }
  }

  .editor-main {
    border-radius: 3px;
    box-shadow: 0 3px 10px #dcdcdc;
    margin: 25px auto;
    position: relative;
    background: white;
    transform-origin: center top;
    background-image: url("");
  }

  .page-preview-wrapper {
    height: 100%;
    position: relative;
  }

  .page-wrapper-mask {
    height: 100%;
    width: 100%;
    z-index: 1000;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    outline: rgba(236, 238, 240, 0.77) solid 10000px;
  }

  .element-on-edit-pane {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .page-wrapper-menu-operation {
    position: absolute;
    right: 0;
    top: 45px;
    width: 0;
    background: white;
    color: #333;
    text-align: center;
    z-index: 1002;
    border-radius: 4px;
    display: none;
    transition: all 0.28s;
    opacity: 0;
    &.active {
      display: block;
      width: 60px;
      opacity: 1;
    }
    .v-btn {
      border-radius: 0;
    }
  }
</style>
